<style>
	.container {
		width: 300px;
		height: 300px;
		scroll-snap-type: both mandatory; /* x和y轴都强制吸附 */
		overflow-y: scroll;

		.content {
			width: 100%;
			height: 100%;
			scroll-snap-align: start; /* 吸附时的对齐方式 */
			scroll-snap-stop: always; /* 快速滚动时不允许越过吸附位置,过快时依然会越过 */
		}
	}
</style>

<body>
	<div class="container">
		<div class="content" style="background-color: aqua;"></div>
		<div class="content" style="background-color: lightcoral;"></div>
		<div class="content" style="background-color: lightgreen;"></div>
	</div>
</body>